{% extends "forum/forum_home.html" %}
{% block page_link %}
{% endblock %}

{% block style %}
<style>
    .add_class {
        background: #1E90FF;
    }
    .data_num {
        display: inline-block;
        color: #0b0b0b;
    }
    .forum_title a:link {
        color:blue;
    }
    .forum_title a:hover{
        text-decoration: underline;
    }
    .forum_title a{
        font-size: 18px;
    }
    ul li {
        list-style: none;
    }

</style>
{% endblock %}

{#    右侧页面#}
{% block right_content %}
    <div style="padding:3px 10px 3px 20px; border-bottom: #a6a9ad solid 1px; width: 100%; position: fixed; background: #e8edf4">
        <div id="all_posts" style="display: inline-block; cursor: pointer;line-height: 38px"><a
                href="forum_home">首页</a></div>
        <div style="display: inline-block">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
        <div id="my_posts" style="display: inline-block; cursor: pointer;"><a
                href="forum_release_view">我的发帖</a></div>
        <div style="display: inline-block">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
        <div id="my_likes" style="display: inline-block; cursor: pointer;"><a
                href="forum_like_view">我的点赞</a></div>
        <div style="display: inline-block">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
        <div id="my_collect" style="display: inline-block; cursor: pointer;">
            <a class="jjj" href="forum_collection_view">我的收藏</a></div>
        <div style="display: inline-block">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
        <div id="competitive_page" style="display: inline-block; cursor: pointer;">
            <a href="forum_competitive_view" style="color: red">精品文章</a></div>
        <div style="display: inline-block">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
        <div id="popular_page" style="display: inline-block; cursor: pointer;">
            <a href="forum_popular_view">热门文章</a></div>
    </div>
    <div style="height: 50px"></div>
    <div  style=" width:100%; height: auto;padding: 10px;">
        <ul>
            {% for obj in record_list %}
                <li style="padding-top: 20px; border-bottom: #b3b3b3 dashed 1px" onmousemove="on_this(this)" onmouseout="out_this(this)">
                <div class="forum_title" style="padding-left: 20px">
                    <a href="forum_details?id={{ obj.id }}" style="color: #121212;font-weight: bold; ">{{ obj.title }}</a>
                </div>
                {#        首页展示文章第一行内容#}
                <div style="height: 75px;padding:0 20px 0 20px" id="article_body">
                    <p style="overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical;word-wrap: break-word;">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ obj.content_text }}</p>
                </div>
                <div style="padding: 15px 15px 15px 20px">
                    <div style="display: inline-block; padding: 5px;line-height: 14px; width: 25%">
                        <div class="author_name" style="display: inline-block; color: #9195a3">
                            {{ obj.author }}
                        </div>
                        <div style="display: inline-block">&nbsp;&nbsp;&nbsp;&nbsp;</div>
                        <div class="update_time" style="display: inline-block; color: #9195a3;font-size: 14px">
                            {{ obj.create_time }}
                        </div>
                    </div>
                </div>
            </li>
            {% endfor %}
        </ul>
    </div>
{% endblock %}

{% block script %}
<script>
    window.onload = function () {
        document.getElementById("loading").style.display = "none";
        document.getElementById("forum").className = "add_class";
        document.getElementById("main_page").className = "add-nav-active";
    };
    function on_this(this_is) {
        this_is.style.background='#e3e3e3'
    }
    function out_this(this_is) {
        this_is.style.background='#e8edf4'
    }
</script>
{% endblock %}